<template>
    <div class="poetry-cls">
        <div class="kk k1"></div>
        <div class="kk k2"></div>
        <div class="kk k3"></div>
        <div class="kk k4"></div>

        <section class="content">
            <div class="title">{{origin.title}}</div>
            <div class="wiewbtnbox">
                作者：<span> {{origin.author}}</span>
                朝代：<span> {{origin.dynasty}}</span>
            </div>
            <div>
                <ul>
                    <li v-for="item in origin.content">
                        {{item}}
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    const origin = ref({
        title: '',
    })
    onMounted(async() => {
        window.load(result => {
            origin.value = result.data['origin'];
        });
    })
</script>

<style scoped lang="scss">
    .poetry-cls {
        position: relative;
        min-height: 500px;
        border: 1px solid #A9927E;
        background: url('/assets/images/poetry.png');
        overflow: hidden;
        .kk {
            background: url('/assets/images/zj_bg.png') left top;
            width: 18px;
            height: 18px;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }
        .k1 {
            left: -0.5px;
            top: -1px;
        }
        .k2 {
            right: -1px;
            top: -1px;
            background-position: right 0px;
        }
        .k3 {
            left: -0.5px;
            bottom: -1px;
            background-position: left bottom;
        }
        .k4 {
            right: -1px;
            bottom: -1px;
            background-position: right bottom;
        }
        .content {
            min-height: 500px;
            text-align: center;
            .title {
                color: #7D551D;
                font-size: 22px;
                text-indent: 0;
                padding: 5px 20px;
                margin-bottom: 10px;
                border-bottom: 1px dashed #CACAA9;
            }
            .wiewbtnbox {
                padding: 5px 20px;
                line-height: 24px;
                font-size: 13px;
                color: #888;
                span {
                    color: #B28B8B;
                }
            }
            ul {
                padding: 0;
                li {
                    list-style: none;
                    padding: 5px 20px;
                    color: #333;
                    line-height: 24px;
                }
            }
        }
    }
    
</style>